<template>
	<view class="control">
		<view class="nav">
			<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
		</view>
		<view class="top">
			<image mode="widthFix"
				src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6a34ad3e8a24a341cd3ea964c41ebf4623cdd884.png">
			</image>
			<view class="info">
				<view class="info-1">
					￥<text>{{amount}}</text>
				</view>
				<view class="info-2" v-if="typetime">剩余支付时间：{{payWaitTimes}}</view>
				<view class="info-2" style="margin-left: 50rpx;" v-if="typetimes">超时付款</view>
			</view>
		</view>
		<view class="form">
			<radio-group @change='change1'>
				<label class="item flex-align" v-for="(item,index) in payList" :key="index">
					<image mode="aspectFit" :src="item.cover"></image>
					<view class="flex-between item-con">
						<text>{{item.name}}</text>
						<radio :value="index" color="#2f75fa" :checked="index == 0 ? true : false"
							@change="radioChange(item)" />
					</view>
				</label>
			</radio-group>
		</view>
		<view class="" style="margin-top: 40rpx;" v-if="list1 != ''">
			<u-swiper :list="list1" radius=0></u-swiper>
		</view>

		<view class="footer">
			<view class="btn" @click="$noMultipleClicks(href)" v-if="btn_if">确认支付¥{{amount}}</view>
			<view class="btn_t" v-else>确认支付¥{{amount}}</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue"
	const venues = require("@/api/venues/venues.js")
	const person = require("@/api/personal/index.js");
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				noClick: true,
				btn_if: true, //支付按钮切换
				list1: [],
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '收银台',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				amount: '0.00',
				payWaitTimes: '',
				venue_id: '',
				payList: [],
				payChoose: {},
				order_id: '',
				orderid: '',
				amountValue: '',
				project: '',
				order_type: '',
				classNum: 0,
				goods_id: '',
				timer: null, //重复执行
				typetime: true,
				typetimes: false,
				belong: ""
			}
		},
		onLoad(options) {
			console.log(options, '885')
			if (options.train_price != 'undefined') {
				this.amount = options?.train_price
			}
			this.getChannelBanner()
			this.goods_id = options.goods_id
			this.belong = options.belong
			this.order_id = options.order_id
			this.orderid = options.orderid
			this.amountValue = options.amountValue
			this.project = options.project
			this.order_type = options.order_type
			this.classNum = options?.classNum
			this.amount = options.amount
			this.venue_id = options.venue_id
			this.typetime = options.typetime
			this.chaoshitype = options.chaoshitype
			if (options.typetime == 1) {
				this.typetime = false
				this.typetimes = true
			} else {
				if (this.amount != '') {
					if (this.chaoshitype == 2) {
						var payWait = setInterval(() => {
							// this.payWaitTime(this.payWaitTimes)
							if (this.payWaitTimes == '00:00:00') {
								clearInterval(payWait)
								// uni.navigateBack({
								// 	delta: 2, //返回层数，2则上上页
								// })
								return uni.showToast({
									title: '支付超时',
									icon: 'none',
									mask: true
								})
								uni.reLaunch({
									url: '/pages/personal/personal'
								})
							}
							if (this.payWaitTimes > '0') {
								this.payWaitTime(this.payWaitTimes)
							}
							if (this.payWaitTimes <= 0) {
								console.log(102132)
								clearInterval(payWait)
								uni.reLaunch({
									url: '/pages/personal/personal'
								})
								return uni.showToast({
									title: '支付超时',
									icon: 'none',
									mask: true
								})

							}
						}, 1000)
					}

				}
			}


			let params = {
				venue_id: options.venue_id,
				project_id: getApp().globalData.projectId,
				appid: this.$https.weixinAppId,
				order_id: options.orderid

			}
			venues.getVenuePay(params).then(res => {
				this.payList = res.data.payment
				this.payWaitTimes = res.data.else_time
				// this.payList = res.data
				this.payList.forEach((item, index) => {
					item.content = JSON.parse(item.content)
				})
			})
			// this.getVenuePay()
		},
		onShow() {

		},
		methods: {
			// 获取我的待付款订单
			async getChannelBanner() {
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
				};
				let res = await person.getChannelBanner(postData);
				if (res.code == 1) {
					this.list1 = res.data.result.channel_banner_pay
				}
			},
			// 获取支付方式
			async getVenuePay() {
				let params = {
					venue_id: this.venue_id,
					project_id: getApp().globalData.projectId,
					appid: this.$https.weixinAppId,
					order_id: this.orderid

				}
				let res = await venues.getVenuePay(params)
				if (res.code == 1) {
					this.payList = res.data.payment
					this.payWaitTimes = res.data.else_time
					// this.payList = res.data
					this.payList.forEach((item, index) => {
						item.content = JSON.parse(item.content)
					})
				}
			},
			// 支付等待时间动态变化
			payWaitTime(time) {
				// console.log(this.payWaitTimes,'5555')
				let arr = time.split(':')
				let hour = arr[0]
				let min = arr[1]
				let sec = arr[2]
				let sec_num = parseInt(sec)
				sec_num--
				if (sec_num < 0) {
					sec_num = 59
					min--
					if (min < 0) {
						min = 59
						hour--
						if (hour < 0) {
							hour = 23
						}
					}
				}
				sec = sec_num.toString()
				if (sec.length == 1) {
					sec = '0' + sec
				}
				min = min.toString()
				if (min.length == 1) {
					min = '0' + min
				}
				hour = hour.toString()
				if (hour.length == 1) {
					hour = '0' + hour
				}
				this.payWaitTimes = hour + ':' + min + ':' + sec
			},

			async href() {
				// 场地
				if (this.belong == "court") {
					let postData = {
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						order_id: this.orderid,
					};
					let res = await venues.checkOrderStatusBeforePay(postData);
					if (res.code == 1) {
						if (res.data.result == '') {
							// 微信
							// 支付
							let pay_id = this.payList[0].id
							this.payChoose = this.payList[0]
							for (let i = 0; i < this.payList.length; i++) {
								if (this.payList[i].checked) {
									pay_id = this.payList[i].id
									this.payChoose = this.payList[i]
									break
								}
							}
							if (pay_id == '') {
								return uni.showToast({
									title: '请选择支付方式',
									icon: 'none',
									mask: true
								})
							}
							if (this.payChoose.type == 'wechat_xcx') {
								let that = this
								let res = await venues.wxPay({
									appid: this.payChoose.content.wechat_appid,
									project_id: getApp().globalData.projectId,
									pay_id: this.payChoose.id,
									orderid: this.orderid,
									order_id: this.order_id,
									openid: uni.getStorageSync('openid'),
									amount: this.amount,
									project: this.project,
									order_type: this.order_type,
									applet_id: this.$https.applet_id,
									goods_id: this.goods_id
								})
								let paymentData = res.data
								var jweixin = require('jweixin-module');
								jweixin.config({
									debug: false,
									appId: paymentData.appId, //必填
									jsApiList: ['chooseWXPay']
								});
								jweixin.ready(function() {
									jweixin.chooseWXPay({
										timeStamp: paymentData.timestamp,
										nonceStr: paymentData.noncestr,
										package: paymentData.package,
										signType: 'MD5',
										paySign: paymentData.paySign,
										success: function(res) {
											// 支付成功后的回调函数
											this.btn_if = false
											uni.reLaunch({
												url: "/page_venues/pages/venuesDetail/pay/paySuccess?backUp=1"
											})
										},
										cancel: function(r) {},
										fail: function(res) {
											console.log('payfail')
											if (res.errMsg = 'requestPayment:fail cancel') {
												setTimeout(() => {
													uni.navigateBack({
														delta: 2, //返回层数，2则上上页
													})
												}, 500)
											}
										}
									});
								});
								jweixin.error(function(res) {
									uni.showToast({
										icon: 'none',
										title: '支付失败了',
									});
								});
								// 小程序支付
								// uni.requestPayment({
								// 	timeStamp: paymentData.timestamp,
								// 	nonceStr: paymentData.noncestr,
								// 	package: paymentData.package,
								// 	signType: 'MD5',
								// 	paySign: paymentData.paySign,
								// 	success: (res) => {
								// 		// uni.reLaunch({
								// 		// 	url: '/pages/personal/personal'
								// 		// })
								// 		this.btn_if = false
								// 		uni.reLaunch({
								// 			url: "/page_venues/pages/venuesDetail/pay/paySuccess?backUp=1"
								// 		})

								// 	},
								// 	fail: (res) => {
								// 		console.log('fail:' + JSON.stringify(res));
								// 		if (res.errMsg = 'requestPayment:fail cancel') {
								// 			setTimeout(() => {
								// 				uni.navigateBack({
								// 					delta: 2, //返回层数，2则上上页
								// 				})
								// 			}, 500)
								// 		}
								// 	},
								// 	complete: () => {
								// 		this.loading = false;
								// 	}
								// })
							} else if (this.payChoose.type == 'sao_bei') {
								let that = this
								// 扫呗
								let res = await venues.WxMiniAddOrder({
									app_id: this.$https.weixinAppId,
									project_id: getApp().globalData.projectId,
									open_id: uni.getStorageSync('openid'),
									order_type: this.order_type,
									pay_money: this.amount,
									order_number: this.order_id,
									pay_id: this.payChoose.id,
									orderid: this.orderid,
									goods_id: this.goods_id
								})
								let paymentData = res.data
								var jweixin = require('jweixin-module');
								jweixin.config({
									debug: false,
									appId: paymentData.appId, //必填
									jsApiList: ['chooseWXPay']
								});
								jweixin.ready(function() {
									jweixin.chooseWXPay({
										timeStamp: paymentData.timestamp,
										nonceStr: paymentData.noncestr,
										package: paymentData.package,
										signType: paymentData.signType,
										paySign: paymentData.result.paySign,
										success: function(res) {
											// 支付成功后的回调函数
											this.btn_if = false
											uni.reLaunch({
												url: "/page_venues/pages/venuesDetail/pay/paySuccess?backUp=1"
											})
										},
										cancel: function(r) {},
										fail: function(res) {
											console.log('payfail')
											if (res.errMsg = 'requestPayment:fail cancel') {
												setTimeout(() => {
													uni.navigateBack({
														delta: 2, //返回层数，2则上上页
													})
												}, 500)
											}
										}
									});
								});
								jweixin.error(function(res) {
									uni.showToast({
										icon: 'none',
										title: '支付失败了',
									});
								});
							}
						}
					}
				} else {
					// 票卡
					console.log(2)
					// 微信
					// 支付
					let pay_id = this.payList[0].id
					this.payChoose = this.payList[0]
					for (let i = 0; i < this.payList.length; i++) {
						if (this.payList[i].checked) {
							pay_id = this.payList[i].id
							this.payChoose = this.payList[i]
							break
						}
					}
					if (pay_id == '') {
						return uni.showToast({
							title: '请选择支付方式',
							icon: 'none',
							mask: true
						})
					}
					if (this.payChoose.type == 'wechat_xcx') {
						let that = this
						let res = await venues.wxPay({
							appid: this.payChoose.content.wechat_appid,
							project_id: getApp().globalData.projectId,
							pay_id: this.payChoose.id,
							orderid: this.orderid,
							order_id: this.order_id,
							openid: uni.getStorageSync('openid'),
							amount: this.amount,
							project: this.project,
							order_type: this.order_type,
							applet_id: this.$https.applet_id,
							goods_id: this.goods_id
						})
						let paymentData = res.data
						var jweixin = require('jweixin-module');
						jweixin.config({
							debug: false,
							appId: paymentData.appId, //必填
							jsApiList: ['chooseWXPay']
						});
						jweixin.ready(function() {
							jweixin.chooseWXPay({
								timeStamp: paymentData.timestamp,
								nonceStr: paymentData.noncestr,
								package: paymentData.package,
								signType: 'MD5',
								paySign: paymentData.paySign,
								success: function(res) {
									// 支付成功后的回调函数
									this.btn_if = false
									uni.reLaunch({
										url: "/page_venues/pages/venuesDetail/pay/paySuccess?backUp=1"
									})
								},
								cancel: function(r) {},
								fail: (res) => {
									console.log('fail:' + JSON.stringify(res));
									if (res.errMsg = 'requestPayment:fail cancel') {
										uni.showModal({
											title: '提示',
											// 提示文字
											content: '是否进行支付？',
											// 取消按钮的文字自定义
											cancelText: "取消支付",
											// 确认按钮的文字自定义
											confirmText: "继续支付",
											//删除字体的颜色
											confirmColor: '#000000',
											//取消字体的颜色
											cancelColor: '#999',
											success: function(res) {
												if (res.confirm) {
													// 执行确认后的操作
												} else {
													console.log(9999)
													// 执行取消后的操作
													let datas = {
														app_id: that.$https
															.weixinAppId,
														project_id: getApp()
															.globalData
															.projectId,
														order_id: that.orderid,
													};
													venues.cancelPay(datas).then(
														result => {
															// console.log(result, '787878')
															if (result.code == 1) {
																uni.reLaunch({
																	url: '/pages/personal/orders/orders?tab=1'
																})
															}
														})

												}
											}
										})
									}
								},
							});
						});
						jweixin.error(function(res) {
							uni.showToast({
								icon: 'none',
								title: '支付失败了',
							});
						});
					} else if (this.payChoose.type == 'sao_bei') {
						let that = this
						// 扫呗
						let res = await venues.WxMiniAddOrder({
							app_id: this.$https.weixinAppId,
							project_id: getApp().globalData.projectId,
							open_id: uni.getStorageSync('openid'),
							order_type: this.order_type,
							pay_money: this.amount,
							order_number: this.order_id,
							pay_id: this.payChoose.id,
							orderid: this.orderid,
							goods_id: this.goods_id
						})
						let paymentData = res.data
						var jweixin = require('jweixin-module');
						jweixin.config({
							debug: false,
							appId: paymentData.appId, //必填
							jsApiList: ['chooseWXPay']
						});
						jweixin.ready(function() {
							jweixin.chooseWXPay({
								timeStamp: paymentData.timestamp,
								nonceStr: paymentData.noncestr,
								package: paymentData.package,
								signType: paymentData.signType,
								paySign: paymentData.result.paySign,
								success: function(res) {
									// 支付成功后的回调函数
									this.btn_if = false
									uni.reLaunch({
										url: "/page_venues/pages/venuesDetail/pay/paySuccess?backUp=1"
									})
								},
								cancel: function(r) {},
								fail: (res) => {
									console.log('fail:' + JSON.stringify(res));
									if (res.errMsg = 'requestPayment:fail cancel') {
										uni.showModal({
											title: '提示',
											// 提示文字
											content: '是否进行支付？',
											// 取消按钮的文字自定义
											cancelText: "取消支付",
											// 确认按钮的文字自定义
											confirmText: "继续支付",
											//删除字体的颜色
											confirmColor: '#000000',
											//取消字体的颜色
											cancelColor: '#999',
											success: function(res) {
												if (res.confirm) {
													// 执行确认后的操作

												} else {
													// 执行取消后的操作
													let datas = {
														app_id: that.$https
															.weixinAppId,
														project_id: getApp()
															.globalData
															.projectId,
														order_id: that.orderid,
													};
													venues.cancelPay(datas).then(
														result => {
															// console.log(result, '787878')
															if (result.code == 1) {
																uni.reLaunch({
																	url: '/pages/personal/orders/orders?tab=1'
																})
															}
														})
												}
											}
										})
									}
								},
							});
						});
						jweixin.error(function(res) {
							uni.showToast({
								icon: 'none',
								title: '支付失败了',
							});
						});
					}
				}
			},

			change1(e) {
				let that = this
				let i = e.detail.value
				const item = this.payList[i]
				if (item) {
					this.payChoose = item
					this.payList[i].checked = true
				} else {
					this.payChoose = {}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background: #F3F3F3;

		.top {
			position: relative;

			>image {
				width: 100%;
			}

			.info {
				position: absolute;
				left: 0;
				right: 0;
				margin: auto;
				top: 0;
				width: fit-content;
				height: fit-content;
				bottom: 0;

				.info-1 {
					font-size: 40rpx;
					color: #FFFFFF;
					text-align: center;

					text {
						font-size: 55rpx;
						font-weight: bold;
						font-family: DIN-Bold;
					}
				}

				.info-2 {
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 20rpx;
				}
			}
		}

		.nav {
			position: absolute;
			top: 0;
			z-index: 3;
			width: 100%;
		}

		.form {
			box-sizing: border-box;

			.item {
				padding: 0rpx 30rpx;
				background-color: white;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 15rpx;
				}

				.item-con {
					flex: 1;
					width: 0;
					font-size: 26rpx;
					padding: 40rpx 0;
					color: #333333;
					border-bottom: 1px solid #EFEFEF;

					.pirce {
						color: #888888;
					}
				}

				radio {
					transform: scale(0.8);
				}
			}
		}

		.footer {
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 0;
			padding: 20rpx 30rpx;
			background-color: white;

			.btn {
				text-align: center;
				width: 100%;
				padding: 22rpx 0;
				background: linear-gradient(0deg, #FC484C, #F72746);
				border-radius: 19px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}

			.btn_t {
				text-align: center;
				width: 100%;
				padding: 22rpx 0;
				background: linear-gradient(0deg, #b6b6b6, #b6b6b6);
				border-radius: 19px;
				font-size: 28rpx;
				font-weight: bold;
				color: #FFFFFF;
			}
		}
	}
</style>